<template>
  <div>
    <h1>用户管理</h1>
    <el-button @click="showCreateForm = !showCreateForm">
      {{ showCreateForm ? '隐藏创建用户表单' : '创建用户' }}
    </el-button>
    <!-- 创建用户表单 -->
    <el-form v-if="showCreateForm" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="user.password" type="password" placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item label="用户角色">
        <el-select v-model="user.role" placeholder="请选择用户角色">
          <el-option label="管理员" value="管理员"></el-option>
          <el-option label="巡检员" value="巡检员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.prevent="createNewUser">提交创建</el-button>
      </el-form-item>
    </el-form>
    <!-- 用户列表展示 -->
    <el-table :data="users" stripe>
      <el-table-column prop="id" label="用户ID"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="role" label="用户角色"></el-table-column>
      <el-table-column prop="created_at" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="handleEdit(row)">修改用户信息</el-button>
          <el-button type="text" @click="deleteUser(row.id)">删除用户</el-button>
          <el-button type="text" @click="fetchUserById(row.id)">查询用户</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 更新用户信息表单 -->
    <el-form v-if="showUpdateForm" label-width="120px">
      <el-form-item label="更新用户名">
        <el-input v-model="user.username" placeholder="请输入更新后的用户名"></el-input>
      </el-form-item>
      <el-form-item label="更新密码">
        <el-input v-model="user.password" type="password" placeholder="请输入更新后的密码"></el-input>
      </el-form-item>
      <el-form-item label="更新用户角色">
        <el-select v-model="user.role" placeholder="请选择更新后的用户角色">
          <el-option label="管理员" value="管理员"></el-option>
          <el-option label="巡检员" value="巡检员"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click.prevent="updateUser">提交更新</el-button>
      </el-form-item>
    </el-form>
    <!-- 展示单个用户详情 -->
    <el-dialog v:visible.sync="showUserDetails" title="用户详情">
      <el-form label-width="120px">
        <el-form-item label="用户ID">
          <span>{{ singleUser.id }}</span>
        </el-form-item>
        <el-form-item label="用户名">
          <span>{{ singleUser.username }}</span>
        </el-form-item>
        <el-form-item label="密码">
          <span>{{ singleUser.password }}</span>
        </el-form-item>
        <el-form-item label="用户角色">
          <span>{{ singleUser.role }}</span>
        </el-form-item>
        <el-form-item label="创建时间">
          <span>{{ singleUser.created_at }}</span>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      showCreateForm: false,
      showUpdateForm: false,
      showUserDetails: false,
      user: {
        username: '',
        password: '',
        role: '巡检员'
      },
      users: [],
      selectedUserId: '',
      singleUser: null
    };
  },
  async created() {
    await this.fetchUsers();
  },
  methods: {
    async createNewUser() {
      try {
        const currentTime = new Date().toISOString();
        this.user.created_at = currentTime;
        const response = await axios.post('/api/users/addUser', this.user);
        if (response.status === 200) {
          await this.fetchUsers();
          this.user = {
            username: '',
            password: '',
            role: '巡检员'
          };
          this.showCreateForm = false;
        }
      } catch (error) {
        console.error('创建用户失败', error);
      }
    },
    async fetchUsers() {
      try {
        const response = await axios.get('/api/users/getUserAll');
        if (response.status === 200) {
          this.users = response.data;
        }
      } catch (error) {
        console.error('获取用户列表失败', error);
      }
    },
    async updateUser() {
      if (!this.selectedUserId) {
        console.error('请选择要更新的用户');
        return;
      }
      try {
        const updatedUser = {
          username: this.user.username,
          password: this.user.password,
          role: this.user.role
        };
        const response = await axios.put(`/api/users/updateUser/${this.selectedUserId}`, updatedUser);
        if (response.status === 200) {
          await this.fetchUsers();
          this.showUpdateForm = false;
        }
      } catch (error) {
        console.error('更新用户信息失败', error);
      }
    },
    async fetchUserById(id) {
      try {
        const response = await axios.get(`/api/users/selectUser/${id}`);
        if (response.status === 200) {
          this.singleUser = response.data;
          this.showUserDetails = true;
        }
      } catch (error) {
        console.error('查询用户失败', error);
      }
    },
    async deleteUser(id) {
      if (confirm('确定要删除该用户吗？')) {
        try {
          const response = await axios.delete(`/api/users/deleteUser/${id}`);
          if (response.status === 200) {
            await this.fetchUsers();
          }
        } catch (error) {
          console.error('删除用户失败', error);
        }
      }
    },
    handleEdit(row) {
      this.selectedUserId = row.id;
      this.user = { ...row };
      this.showUpdateForm = true;
    }
  }
};
</script>

<style scoped>
/* 可根据需要添加额外的自定义样式 */
</style>